﻿
@{
    ViewBag.Title = "Kpi項目";
    ViewBag.PageInfo = "Kpi/KpiItem";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@*右鍵菜單*@
<style>
    #itemkpimenu {
        display: none;
        /*height: 320px;*/
        width: 240px;
        position: absolute;
        z-index: 9999;
        background-color: #ffffff;
        border: 1px solid #ffffff;
        border-radius: 8px;
        box-shadow: 2px 2px 8px 2px #c4c4c4;
    }

    .itemkpimenu-item {
        height: 35px;
        line-height: 35px;
        padding: 0 10px;
        cursor: default;
    }

        .itemkpimenu-item:hover {
            border-radius: 8px;
            background-color: #f1f1f1;
        }
</style>
<div id="itemkpimenu">
</div>
<script>
    var width = window.innerWidth;
    var height = window.innerHeight;
    //重新计算窗口大小
    window.addEventListener('resize', () => {
        width = window.innerWidth;
        height = window.innerHeight;
    })
    var itemkpimenu = document.querySelector("#itemkpimenu");
    window.oncontextmenu = function (e) {
        //取消瀏覽器默認右鍵菜單
        e.preventDefault();
        var tableTitle = $("#ItemDataTd table thead tr")[0].children;
        var data = "";
        for (var i = 1; i < tableTitle.length - 2; i++) {
            if (itemkpimenu.innerHTML == '\n') {
                if (tableTitle[i].hidden) {
                    data += '<div class="itemkpimenu-item" data-id="' + i + '"><input class="kpicheck-item" type="checkbox" onchange="kpiHideColItem(' + i + ', event)" />&nbsp;&nbsp;' + tableTitle[i].innerHTML.replace("<br>", "") + '</div>';
                } else {
                    data += '<div class="itemkpimenu-item" data-id="' + i + '"><input class="kpicheck-item" type="checkbox" checked="checked" onchange="kpiHideColItem(' + i + ', event)" />&nbsp;&nbsp;' + tableTitle[i].innerHTML.replace("<br>", "") + '</div>';
                }
            } else {
                if (itemkpimenu.children[i - 1].children[0].checked) {
                    data += '<div class="itemkpimenu-item" data-id="' + i + '"><input class="kpicheck-item" type="checkbox" checked="checked" onchange="kpiHideColItem(' + i + ', event)" />&nbsp;&nbsp;' + tableTitle[i].innerHTML.replace("<br>", "") + '</div>';
                } else {
                    data += '<div class="itemkpimenu-item" data-id="' + i + '"><input class="kpicheck-item" type="checkbox" onchange="kpiHideColItem(' + i + ', event)" />&nbsp;&nbsp;' + tableTitle[i].innerHTML.replace("<br>", "") + '</div>';
                }
            }
        }
        itemkpimenu.innerHTML = data;

        //根據鼠標右鍵位置定位
        if (e.pageX + 240 > width) {
            itemkpimenu.style.left = (width - 260) + "px";
        } else {
            itemkpimenu.style.left = e.pageX + "px";
        }
        if (e.pageY + 550 > height) {
            itemkpimenu.style.top = (height - 550) + "px";
        } else {
            itemkpimenu.style.top = e.pageY + "px";
        }
        //顯示菜單
        itemkpimenu.style.display = "block";
    }
    window.onclick = function (e) {
        //點擊（非右鍵菜單範圍）關閉
        if (e.target.className != "itemkpimenu-item" && e.target.className != "kpicheck-item") {
            itemkpimenu.style.display = "none";
        }
    }
    window.onmousewheel = function (e) {
        //滑動滾輪關閉
        itemkpimenu.style.display = "none";
    }
    //監聽菜單點擊
    window.addEventListener("click", function (e) {
        if (e.target.dataset.id) {
            itemkpimenu.children[e.target.dataset.id - 1].children[0].checked = !itemkpimenu.children[e.target.dataset.id - 1].children[0].checked;
            kpiHideColItem(e.target.dataset.id, itemkpimenu.children[e.target.dataset.id - 1].children[0].checked)
        }
        //switch (e.target.dataset.id) {
        //    case "1": break;
        //}
    });
    //table列隱藏
    function kpiHideColItem(colIndex, event) {
        var checked;
        if (event == true || event == false) {
            checked = event;
        } else {
            checked = event.target.checked;
        }
        var thead = $("#ItemDataTd table thead tr")[0].children;
        var tbody = $("#ItemDataTd table tbody tr");
        //隱藏thead
        thead[colIndex].hidden = !checked;
        //隱藏tbody
        for (var i = 0; i < tbody.length; i++) {
            tbody[i].children[colIndex].hidden = !checked;
        }
    }
    //刷新數據後隱藏會失效，table每次渲染完後檢查一遍，若有失效則重新隱藏
    function reloadHideItem() {
        if (itemkpimenu.innerHTML != '\n') {
            for (var j = 0; j < itemkpimenu.children.length; j++) {
                kpiHideColItem(j + 1, itemkpimenu.children[j].children[0].checked);
            }
        }
    }
</script>

@*界面主體*@
<div style="position: fixed; margin-top: -260px; background-color: white; width: 100%; z-index: 100;">
    <div style="border: 4px solid #92d050; width: 80%; height: 180px; margin: auto; margin-top: 20px; border-radius: 10px; ">
        <table style="width: 100%; margin-top:10px;">
            <tr style="height:50px;">
                <td style="width: 10%; text-align: right;">域：</td>
                <td style="width: 16%; text-align: left;">
                    <input id="TxtContractItem" type="text" value="@ViewBag.Contract" style="height:25px;width:162px;" />
                </td>
                <td style="width: 10%; text-align: right;">NO：</td>
                <td style="width: 16%; text-align: left;">
                    <input id="TxtKpiNoItem" type="text" style="height:25px;width:162px;" />
                </td>
                <td style="width: 10%; text-align: right;">編號：</td>
                <td style="width: 16%; text-align: left;">
                    <input id="TxtKpiCode" type="text" style="height:25px;width:162px;" />
                </td>
            </tr>
            <tr>
                <td style="width: 10%; text-align: right;">流程：</td>
                <td style="width: 16%; text-align: left;">
                    <input id="TxtKpiDescItem" type="text" style="height:25px;width:162px;" />
                </td>
                <td style="width: 10%; text-align: right;">績效指標：</td>
                <td style="width: 16%; text-align: left;">
                    <input id="TxtKpiTargetItem" type="text" style="height:25px;width:162px;" />
                </td>
                <td style="width: 10%; text-align: right;">部門：</td>
                <td style="width: 16%; text-align: left;">
                    <select id="TxtKpiDeptItem" aria-label="TxtKpiDeptItem" style="height:25px;width:162px;">
                        <option value=""></option>
                        @{
                            foreach (System.Data.DataRow item in ViewBag.Dept)
                            {
                                <option value="@item["DEPT_ID"].ToString()">@item["DEPT_DESC"].ToString()</option>
                            }
                        }
                    </select>
                </td>
            </tr>
            <tr style="height:50px;">
                <td style="width: 10%; text-align: right;">數值趨勢：</td>
                <td style="width: 16%; text-align: left;">
                    <select id="TxtKpiTrendItem" aria-label="TxtKpiTrendItem" style="height:25px;width:162px;">
                        <option value=""></option>
                        @{
                            foreach (System.Data.DataRow item in ViewBag.Trend)
                            {
                                <option value="@item["CONF_ID"].ToString()">@item["CONF_NM"].ToString()</option>
                            }
                        }
                    </select>
                </td>
                <td style="width: 10%; text-align: right;">衡量頻率：</td>
                <td style="width: 16%; text-align: left;">
                    <select id="TxtKpiFreqItem" aria-label="TxtKpiFreqItem" style="height:25px;width:162px;">
                        <option value=""></option>
                        @{
                            foreach (System.Data.DataRow item in ViewBag.Freq)
                            {
                                <option value="@item["CONF_ID"].ToString()">@item["CONF_NM"].ToString()</option>
                            }
                        }
                    </select>
                </td>
                <td style="width: 10%; text-align: right;">輸入方式：</td>
                <td style="width: 16%; text-align: left;">
                    <select id="TxtKpiInputItem" aria-label="TxtKpiInputItem" style="height:25px;width:162px;">
                        <option value=""></option>
                        @{
                            foreach (System.Data.DataRow item in ViewBag.Input)
                            {
                                <option value="@item["CONF_ID"].ToString()">@item["CONF_NM"].ToString()</option>
                            }
                        }
                    </select>
                </td>
            </tr>
        </table>
    </div>
    <div style="text-align: left; margin-top: 15px; margin-left:15%; width: 80%; height: 40px;">
        <input id="AddItem" type="button" value="添&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;加" style="width: 100px; height: 25px;" onclick="btnItemAddClick()" />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input id="DeleteItem" type="button" value="查&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;詢" style="width: 100px; height: 25px;" onclick="btnItemSearchClick('FP')" />
    </div>
</div>
<div style="text-align: center; margin-top: 260px; margin-left: 10%; width: 80%; overflow: auto; border-radius: 5px; z-index: 99;">
    <div id="ItemDataTd" style="text-align: center; width: 100%; height: 586px;">
        @{
            System.Data.DataTable itemData = ViewBag.ItemData;
            if (itemData.Rows.Count > 0)
            {
                <table style="width: 100%; border-left: 1px solid #507cd1; border-right: 1px solid #507cd1;">
                    <thead style="position:sticky;top:0;">
                        <tr style="background-color:#507cd1; font-size:18px; color: white; font-weight:bold; height:40px;">
                            <td hidden="hidden">ITEM_ID</td>
                            <td width="5%">域</td>
                            <td width="4%">NO</td>
                            <td hidden="hidden">NO_HIS</td>
                            <td width="4%">編號</td>
                            <td width="14%">流程</td>
                            <td width="13%">績效指標</td>
                            <td width="14%">公式</td>
                            <td width="5%">單位</td>
                            <td width="6%">數值趨勢</td>
                            <td width="6%">衡量頻率</td>
                            <td width="6%">輸入方式</td>
                            <td width="5%">年度</td>
                            <td width="4%">流程<br />負責人</td>
                            <td width="4%">流程<br />維護人</td>
                            <td width="5%"></td>
                            <td width="5%"></td>
                        </tr>
                    </thead>
                    <tbody>
                        @{
                            int colorIndex = 1;
                            string color;
                            foreach (System.Data.DataRow item in itemData.Rows)
                            {
                                color = colorIndex % 2 == 1 ? "#eff3fb" : "#ffffff";
                                <tr style="background-color:@color; height: 50px;">
                                    <td hidden="hidden">@item["ITEM_ID"].ToString()</td>
                                    <td>@item["SITE"].ToString()</td>
                                    <td>@item["KPI_NO"].ToString()</td>
                                    <td hidden="hidden">@item["KPI_NO_HIS"].ToString()</td>
                                    <td>@item["ITEM_CODE"].ToString()</td>
                                    <td>@item["KPI_DESC"].ToString()</td>
                                    <td>@item["KPI_TARGET"].ToString()</td>
                                    <td>@item["KPI_FUNC"].ToString()</td>
                                    <td>@item["UOM_NM"].ToString()</td>
                                    <td>@item["TREND_DESC"].ToString()</td>
                                    <td>@item["FREQ_DESC"].ToString()</td>
                                    <td>@item["INPUT_TYPE"].ToString()</td>
                                    <td>@item["YEARLY_TYPE"].ToString()</td>
                                    <td>@item["KPI_OWNER"].ToString()</td>
                                    <td>@item["MAINTAINER"].ToString()</td>
                                    @*<td>@item["MAINTAINER"].ToString()</td>*@
                                    <td><input type="button" value="修改" style="width: 50px; height: 25px;" onclick="btnItemUpdateClick(event)" /></td>
                                    <td><input type="button" value="刪除" style="width: 50px; height: 25px;" onclick="btnItemDeleteClick(event)" /></td>
                                </tr>
                                colorIndex++;
                            }
                        }
                    </tbody>
                    <tfoot style="position: sticky; bottom: 0;">
                        <tr style="background-color:#507cd1; font-size:15px; color: white; height:35px;">
                            <td colspan="17" style="text-align:left;">
                                &#12288;&#12288;&#12288;
                                第:
                                <span id="pagesIndex">@ViewBag.PagesIndex</span>
                                頁/共:
                                <span>@ViewBag.PagesCount</span>
                                頁
                                &#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;
                                &#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;
                                &#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;
                                <a style="cursor:pointer;color:white;" onclick="btnItemSearchClick('FP')">首頁</a>
                                <a style="cursor:pointer;color:white;" onclick="btnItemSearchClick('PP')">上一頁</a>
                                <a style="cursor:pointer;color:white;" onclick="btnItemSearchClick('NP')">下一頁</a>
                                <a style="cursor:pointer;color:white;" onclick="btnItemSearchClick('LP')">尾頁</a>
                                轉到第
                                <input id="pagesTo" type="number" value="@ViewBag.PagesIndex" style="height:20px;width:40px;color:black;" />
                                頁
                                <a style="cursor:pointer;color:white;" onclick="btnItemSearchClick('TP')">Go</a>
                                &#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;
                                &#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;
                                &#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;
                                每頁
                                <select id="pagesNum" style="height: 20px; width: 40px; color: black;" onchange="btnItemSearchClick('FP')">
                                    @{
                                        int value = 0;
                                        for (int i = 1; i <= 5; i++)
                                        {
                                            value = i * 10;
                                            if (ViewBag.pagesNum == i * 10)
                                            {
                                                <option value="@value" selected="selected">@value</option>
                                            }
                                            else
                                            {
                                                <option value="@value">@value</option>
                                            }
                                        }
                                    }
                                </select>
                                筆/共
                                <span>@ViewBag.DataNums</span>
                                筆
                            </td>
                        </tr>
                    </tfoot>
                </table>
            }
            else
            {
                <h3>未查詢到數據！</h3>
            }
        }
    </div>
</div>

<script>
    //查詢
    function btnItemSearchClick(flipPage) {
        showLoading();
        $.ajax({
            type: "get",
            url: "/Kpi/BtnSearchClickItem",
            data: {
                txtKpiSite: $("#TxtContractItem").val(),
                txtKpiNo: $("#TxtKpiNoItem").val(),
                txtKpiCode: $("#TxtKpiCode").val(),
                txtKpiDesc: $("#TxtKpiDescItem").val(),
                txtKpiTarget: $("#TxtKpiTargetItem").val(),
                txtKpiDept: $("#TxtKpiDeptItem").val(),
                txtKpiTrend: $("#TxtKpiTrendItem").val(),
                txtKpiFreq: $("#TxtKpiFreqItem").val(),
                txtKpiInput: $("#TxtKpiInputItem").val(),
                pagesIndex: $("#pagesIndex").text(),
                pagesNum: $("#pagesNum").val(),
                pagesTo: $("#pagesTo").val(),
                flipPage: flipPage
            },
            success: function (data) {
                $("#ItemDataTd").html(data);
                reloadHideItem();
                hideLoading();
            },
            error: function (err) {
                hideLoading();
            }
        });
    }

    function btnItemAddClick() {
        window.location.href = "/Kpi/KpiItemAdd";
    }

    function btnItemDeleteClick(event) {
        if (confirm("確認刪除數據？")) {
            var row = event.target.parentNode.parentNode;
            var itemNo = row.cells[0].innerText;
            showLoading();
            $.ajax({
                type: "post",
                url: "/Kpi/KpiItemDelete",
                data: {
                    itemNo: itemNo,
                },
                success: function (data) {
                    hideLoading();
                    var result = JSON.parse(data);
                    if (result.flag) {
                        alert(result.msg);
                        btnItemSearchClick('FP');
                    } else {
                        alert(result.msg);
                    }
                },
                error: function (err) {
                    hideLoading();
                }
            });
        } else {
            return;
        }
    }

    function btnItemUpdateClick(event) {
        var row = event.target.parentNode.parentNode;
        var itemNo = row.cells[0].innerText;
        var data = encodeddata(itemNo);
        window.location.href = "/Kpi/KpiItemAdd?itemNo=" + data;
    }
</script>